<template>
	<view class="Top-view">
		<view v-for="(item, index) in ['全部', '销量', '价格']" :key="index" @click="queryCombo()">
			<text>{{ item }}</text>
			<image :src="index == 0 ? '/static/other/shaixuan-jiantou.png' : '/static/other/shaixuan.png'"></image>
		</view>
	</view>
	<view style="height:100rpx"></view>
	<!-- 点击全部的筛选 -->
	<view class="mask-view" v-if="false"></view>
	<view class="con-view" v-if="false">
		<text v-for="(item, index) in ['全部', '青年套餐', '入职套餐']" :key="index" @click="selectType()">{{ item }}</text>
	</view>
	<!-- 列表 -->
	<view class="phy-exam-back" @click="phyDetail()">
		<text class="phy-exam-type">入职体检套餐</text>
		<view class="phy-exam-flex">
			<image src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/ruzhitijian.png" mode="aspectFill">
			</image>
			<view>
				<text class="phy-exam-title">适用于求职人员</text>
				<text class="phy-exam-label">特点：根据企事业单位.....</text>
			</view>
		</view>
		<view class="phy-exam-price">
			<text>已约200</text>
			<text>¥600</text>
		</view>
	</view>
	<view style="height:300rpx"></view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, toRefs } from 'vue'


// 到体检详情页
function phyDetail() {
	uni.navigateTo({
		url: "/pages/healthy/desc?id="
	})
}



</script>
  
  
<style>
page {
	background-color: #fafafa;
}

.Top-view {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 50rpx;
	height: 100rpx;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

.Top-view view {
	display: flex;
	align-items: center;
}

.Top-view image {
	width: 20rpx;
	height: 20rpx;
	display: block;
	padding-left: 10rpx;
}

/* 筛选条件 */
.mask-view {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
}

.con-view {
	background-color: #ffffff;
	padding: 0 50rpx;
	position: fixed;
	top: 100rpx;
	left: 0;
	right: 0;
}

.con-view text {
	display: block;
	padding: 20rpx 0;
}

.con-view text.selectActive {
	background: #DDD;
	font-weight: bold;
}

/* 体检套餐 */
.phy-exam-back {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
}

.phy-exam-type {
	font-size: 35rpx;
	font-weight: bold;
}

.phy-exam-flex image {
	width: 200rpx;
	height: 200rpx;
	display: block;
}

.phy-exam-flex {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f6f6f6;
}

.phy-exam-flex view {
	flex: 1;
	padding-left: 20rpx;
}

.phy-exam-flex text {
	display: block;
}

.phy-exam-title {
	font-weight: bold;
	padding-bottom: 20rpx;
}

.phy-exam-label {
	color: #5555;
}

.phy-exam-price {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	font-weight: bold;
	color: #ff5f2c;
}
</style>
